<template>
  <FModal ref="FModal" header="排序设置" width="950px" @ok="ok">
    <div class="field-list-config-wrapper">
      <div class="field-list-config-left">
        <div style="height: 350px; overflow: auto">
          <FList size="small" :selected-key="selectedLeftKey"
                 :data-source="formDefinition.fields"
                 title-name="showName"  keyName="tableFieldName"
                 bordered color="rgb(96, 98, 102)"
                 @select="selectedLeftKeyChange"
                 @doubleClick="leftDblclick"
                 search-placeholder="系统数据域">

          </FList>
        </div>
        <div class="field-list-config-border" style="height: 2px"/>
        <div style="height: 350px; overflow: auto">
          <FList size="small"
                 :selected-key="selectedLeftKey"
                 :data-source="DefaultSystemFields"
                 title-name="showName"  keyName="tableFieldName"
                 bordered color="rgb(96, 98, 102)"
                 @select="selectedLeftKeyChange"
                 @doubleClick="leftDblclick"
                 search-placeholder="系统数据域">

          </FList>
        </div>
      </div>
      <div class="field-list-config-border" style="width: 5px"/>
      <div class="field-list-config-right">
        <FList size="small" @select="selectedRightKeyChange" keyName="fieldName"
               bordered :data-source="orderByFields" color="rgb(96, 98, 102)"
               title-name="showName" :selected-key="selectedLeftKey"
               search-placeholder="列表显示项" @doubleClick="rightDblclick">
          <template v-slot="{item}">
            <div>
              <span style="margin-right: 10px">{{ item.showName }}</span>
              <span v-if="item.orderByType === 'asc'">↑</span>
              <span v-else>↓</span>
            </div>
          </template>
        </FList>
      </div>

      <div class="field-list-config-right-bar">
        <div>
          <el-button @click="up" type="primary" icon="ArrowUpBold" circle/>
        </div>
        <div style="margin-top: 15px">
          <el-button @click="down" type="primary" icon="ArrowDownBold" circle/>
        </div>
      </div>
    </div>

    <FModal @ok="orderByModalOk" :width="400" header="排序" ref="orderByTypeModal">
      <el-form label-width="100px">
        <el-form-item label="增加排序">
          {{ orderByModalData.showName }}
        </el-form-item>

        <el-form-item label="排序类型">
          <el-radio-group v-model="orderByModalData.orderByType">
            <el-radio label="asc">升序</el-radio>
            <el-radio label="desc">降序</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
    </FModal>
  </FModal>
</template>
<script>
import FModal from '@/components/FModal/index.vue';
import FList from '@/components/FList';
import {DefaultFormDefinition, DefaultSystemFields} from '@/components/form/DefaultFormDefinition';

export default {
  name: "ListFieldConfig",
  components: {
    FList,
    FModal
  },
  data() {
    return {
      DefaultSystemFields,
      selectedLeftKey: undefined,
      formDefinition: JSON.parse(JSON.stringify(DefaultFormDefinition)),
      orderByModalData: {
        fieldName: undefined,
        showName: undefined,
        orderByType: 'asc'
      },
      orderByFields: [] //被选中的需要显示的字段
    };
  },
  methods: {
    setData(formDefinition, edittingMenu) {
      this.formDefinition = formDefinition;
      this.edittingMenu = edittingMenu;
      this.$refs.FModal.open();
      this.selectedLeftKey = undefined;
      this.orderByFields = [];
      this.resolveSelectedShowFields();
    },
    resolveSelectedShowFields() {
      if (!this.edittingMenu.orderBy) this.edittingMenu.orderBy = '';
      let temp = [], orderByFields = this.edittingMenu.orderBy.split(',');
      if (!this.edittingMenu.orderByType) this.edittingMenu.orderByType = '';
      let orderByTypes = this.edittingMenu.orderByType.split(',');
      for (let i = 0; i < orderByFields.length; i++) {
        let field = orderByFields[i];
        let index = this.formDefinition.fields.findIndex(f => f.tableFieldName === field);
        if (index !== -1) {
          temp.push({
            fieldName: orderByFields[i],
            orderByType: orderByTypes[i],
            showName: this.formDefinition.fields[index].showName
          });
          continue;
        }
        index = DefaultSystemFields.findIndex(f => f.tableFieldName === field);
        if (index !== -1) {
          temp.push({
            fieldName: orderByFields[i],
            orderByType: orderByTypes[i],
            showName: DefaultSystemFields[index].showName
          });
        }
      }
      this.orderByFields = temp;
    },
    rightDblclick(item) {
      let index = this.orderByFields.findIndex(i => i === item);
      if (index !== -1) {
        this.orderByFields.splice(index, 1);
      }
    },
    leftDblclick(item) {
      let index = this.orderByFields.findIndex(i => i.fieldName === item.tableFieldName);
      if (index !== -1) return;

      let data = JSON.parse(JSON.stringify(item));
      data.orderByType = 'asc';
      this.orderByModalData = data;
      this.orderByModalData.fieldName = this.orderByModalData.tableFieldName;
      this.$refs.orderByTypeModal.open();
    },
    orderByModalOk() {
      this.$refs.orderByTypeModal.close();
      this.orderByFields.push(this.orderByModalData);
      this.orderByModalData = {
        fieldName: undefined,
        showName: undefined,
        orderByType: 'asc'
      };
    },
    selectedLeftKeyChange(item) {
      this.selectedLeftKey = item.tableFieldName;
    },
    selectedRightKeyChange(item) {
      this.selectedLeftKey = item.fieldName;
    },
    down() {
      let index = this.orderByFields.findIndex(s => s.id === this.selectedLeftKey);
      if (index < this.orderByFields.length - 1) {
        let temp = this.orderByFields[index + 1];
        this.orderByFields[index + 1] = this.orderByFields[index];
        this.orderByFields[index] = temp;
      }
    },
    up() {
      let index = this.orderByFields.findIndex(s => s.id === this.selectedLeftKey);
      if (index > 0) {
        let temp = this.orderByFields[index - 1];
        this.orderByFields[index - 1] = this.orderByFields[index];
        this.orderByFields[index] = temp;
      }
    },
    ok() {
      if (this.orderByFields && this.orderByFields.length > 0) {
        this.$emit('selected', this.orderByFields);
        this.$refs.FModal.close();
      }
    },
  }
};
</script>

<style>
.field-list-config-wrapper {
  display: flex;
  width: 100%;
}

.field-list-config-left {
  flex: 0.5;
}

.field-list-config-right {
  flex: 0.5;
}

.field-list-config-padding {
  width: 50px;
}

.field-list-config-border {
  background: rgb(220, 223, 230);
}

.field-list-config-right-bar {
  width: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
</style>
